<template>
  <div id="options">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="modify_one" v-if="Isoff">
      <div class="modifyPwd">
        <p>您是否还记得当前账号{{phone}}</p>
        <p>正在使用的登录密码</p>
      </div>
      <p class="modify_list">
        <span class="modify_list_one" @click="NoknowPwd">不记得</span>
        <span class="modify_list_two" @click="knowPwd">记得</span>
      </p>
    </div>
    <div class="modify_two" v-else>
      <md-field>
        <md-field-item>
          <md-input-item ref="oldPwd" placeholder="请输入原登录密码" align="left" v-model="oldPwd" :type="typestatusold">
            <md-icon :name="yincangIconold" slot="right" @click="offBtnold"></md-icon>
          </md-input-item>
        </md-field-item>
        <md-field-item>
          <md-input-item ref="newPwd" placeholder="请输入新登录密码" align="left" v-model="newPwd" :type="typestatusnew">
            <md-icon :name="yincangIconnew" slot="right" @click="offBtnnew"></md-icon>
          </md-input-item>
        </md-field-item>
      </md-field>
      <p class="pwd_text">密码为6～12位数字及字母的组合，区分大小写</p>
      <p class="rzBtn" @click="modifyBtn">提交</p>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/yincang_icon.svg';
import '@/assets/svgs/xianshi_icon.svg';
import { Tabs, Icon, Field, InputItem, FieldItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '修改登录密码',
      phone: '',
      Isoff: true,
      oldPwd: '',
      newPwd: '',
      IsTopbar: true,
      typestatusold: 'password',
      typestatusnew: 'password',
      yincangIconold: 'yincang_icon',
      yincangIconnew: 'yincang_icon',
      Isoffold: false,
      Isoffnew: false
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    Loading.show();
    http.post('/pakj/passenger/getUserInfo').then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        this.phone = this.startFun(decryptByDESModeEBC(res.data.data.user_phone), 3, 4);
        sessionStorage['web_user_phone'] = decryptByDESModeEBC(res.data.data.user_phone);
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  methods: {
    // 不记得密码
    NoknowPwd() {
      this.$router.push({
        name: 'ChangeLoginPasswordPhone',
        query: {
          type: 1
        }
      });
    },
    // 登录密码自动聚焦
    pwdfouce() {
      this.$nextTick(x => {
        this.$refs.oldPwd.focus();
      });
    },
    // 记得密码
    knowPwd() {
      this.$router.push({
        name: 'ChangeLoginPassword',
        query: {
          type: 2
        }
      });
    },
    // 提交
    modifyBtn() {
      // var reg = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
      var reg = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,12}$/;
      if (!this.oldPwd) {
        Toast({
          content: '请输入原登录密码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!this.newPwd) {
        Toast({
          content: '请输入新登录密码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.newPwd.length < 6 || this.newPwd.length > 12) {
        Toast({
          content: '为了您的账户安全，密码须为6-12位数字与字母的组合',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (!reg.test(this.newPwd)) {
        Toast({
          content: '为了您的账户安全，密码须为6-12位数字与字母的组合',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.newPwd === this.oldPwd) {
        Toast({
          content: '新密码与旧密码一致，请重新设置',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      let params = {
        old_pwd: CryptoJS.MD5(this.oldPwd).toString(),
        new_pwd: CryptoJS.MD5(this.newPwd).toString()
      };
      Loading.show();
      http.post('/pakj/passenger/updateLoginPwd', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.alert({
            title: '提示',
            content: '修改登录密码成功',
            confirmText: '确定',
            onConfirm: () => {
              if (Utils.isApp()) {
                // 判断当前环境是否在app
                /* eslint-disable */
                var os = Utils.getOSName();
                if ((os === 'Linux' || os === 'Android') && handler) {
                  handler.pageOut();
                } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
                  window.webkit.messageHandlers.pageOut.postMessage(JSON.stringify(''));
                }
              } else {
                this.$router.push({
                  name: 'AccountSecurity'
                });
              }
            }
          });
        } else {
          Toast({
            content: res.data.msg,
            duration: 3000,
            hasMask: true
          });
        }
      });
    },
    // 密码输入是否隐藏
    offBtnold() {
      if (this.Isoffold) {
        this.typestatusold = 'password';
        this.yincangIconold = 'yincang_icon';
        this.Isoffold = false;
      } else {
        this.typestatusold = 'text';
        this.yincangIconold = 'xianshi_icon';
        this.Isoffold = true;
      }
    },
    offBtnnew() {
      if (this.Isoffnew) {
        this.typestatusnew = 'password';
        this.yincangIconnew = 'yincang_icon';
        this.Isoffnew = false;
      } else {
        this.typestatusnew = 'text';
        this.yincangIconnew = 'xianshi_icon';
        this.Isoffnew = true;
      }
    },
    startFun(str, frontLen, endLen) {
      var len = str.length - frontLen - endLen;
      var xing = '';
      for (var i = 0; i < len; i++) {
        xing += '*';
      }
      return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#options {
  height: 100vh;
  background-color: color-primary-background;
}

.modify_one {
  padding-top: 20px;
}

.modifyPwd {
  background-color: #fff;
  text-align: center;
  font-size: 28px;
  color: #666;
  padding: 20px 0px 20px 0px;
}

.modify_list {
  margin: 80px 24px 0px 24px;
}

.modify_list span {
  display: inline-block;
  width: 340px;
  height: 98px;
  line-height: 98px;
  text-align: center;
  font-size: 36px;
  border-radius: 7px;
}

.modify_list_one {
  background-color: #fff;
  color: #666;
}

.modify_two {
  padding-top: 20px;
}

.modify_list_two {
  color: #fff;
  background-color: #FF6917;
  margin-left: 22px;
}

.pwd_text {
  font-size: 24px;
  color: #999;
  margin-left: 30px;
  margin-top: 10px;
}

.rzBtn {
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  margin: 56px 20px 0px 20px;
  border-radius: 7px;
}
</style>
